<template>
  <div class="classify">
    <!-- 顶部导航 -->
    <van-nav-bar right-text left-arrow @click-left="back">
      <van-icon slot="right" name="ellipsis" />
      <!-- 插槽-搜索框 -->
      <van-search
        slot="title"
        v-model="value"
        placeholder="花洒仅398元"
        left-icon
        right-icon="search"
        shape="round"
        @click="getSearch"
      ></van-search>
    </van-nav-bar>
    <div class="body-tion">
      <!-- 左边导航 -->
      <div class="body-left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item.classify_name"
            v-for="(item,index) in classify"
            :key="index"
            @click="getIndex(index)"
          ></van-sidebar-item>
        </van-sidebar>
      </div>
      <!-- 内容 -->
      <div class="body-right">
        <div v-for="(items,index) in classify_content" :key="index">
          <span class="sub">{{classify_sub[index].sub_name}}</span>
          <van-grid :gutter="10" :column-num="3">
            <van-grid-item
              border
              v-for="(item,index) in items"
              :key="index"
              :text="item.content_text"
            >
              <van-image slot="icon" :src="item.content_image" />
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      classify: [],
      activeKey: 0,
      classify_sub: [],
      classify_content: []
    }
  },
  methods: {
    //   返回上一级
    back () {
      this.$router.go(-1)// 返回上一层
    },
    // 侧边导航
    async getClassify () {
      const { data: res } = await this.$http.get('/classify')
      // console.log(res)
      this.classify = res.data
    },
    async getIndex (index) {
      let id = index + 1
      // console.log(this.sub_id)
      // 小字
      const { data: res } = await this.$http.get('/classify_sub', {
        params: { id: id }
      })
      this.classify_sub = res.data
      // console.log(this.classify_sub)

      // 循环获取sub_id,将获取到的sub_id保存到浏览器中
      let subId = []
      this.classify_sub.forEach(v => {
        subId.push(v.sub_id)
        // console.log(subId)
      })
      sessionStorage.setItem('sub_id', subId)

      // 图片
      let sub = sessionStorage.getItem('sub_id')
      const { data: rest } = await this.$http.get('/classify_content', {
        params: { ids: sub }
      })
      // console.log(rest)
      this.classify_content = rest.data
    },
    async getContent () {
      const { data: res } = await this.$http.get('/classify_sub', {
        params: { id: 1 }
      })
      this.classify_sub = res.data
      // console.log(res)

      let subId = []
      this.classify_sub.forEach(v => {
        subId.push(v.sub_id)
        // console.log(subId)
      })
      sessionStorage.setItem('sub_id', subId)
      // 图片
      let sub = sessionStorage.getItem('sub_id')
      // console.log(sub)
      const { data: rest } = await this.$http.get('/classify_content', {
        params: { ids: sub }
      })
      // console.log(rest)
      this.classify_content = rest.data
      sessionStorage.removeItem('sub_id')
    },
    // 搜索
    getSearch () {
      this.$router.push('/search')
    }
  },
  created () {
    this.getContent()
    this.getClassify()
  }
}
</script>

<style lang='less'>
body {
  background-color: #ffffff;
}

.van-nav-bar .van-icon {
    color: #969799;
    font-size: 1.4rem;
    cursor: pointer;
  }

.classify .body-tion > div {
  float: left;
}

.classify .body-tion .van-sidebar-item {
  border-bottom: 1px solid #e6e6e6;
  background-color: #f0f0f0;
}

.classify .body-tion .van-sidebar-item--select {
  background-color: #ffffff;
  color: #f32a6d;
}

.classify .body-tion .body-right {
  width: 76%;
}

.classify .body-left {
  height: 690px;
  padding-bottom: 50px;
  overflow: scroll;
}

.classify .van-grid-item__content {
  background-color: #f8f8f8;
  padding-bottom: 5px;
}

.classify .van-search {
  padding: 0;
  padding-top: 6px;
}

.classify .van-grid {
  margin-bottom: 5px;
  margin-top: 5px;
}

.classify .body-right {
  width: 100%;
  height: 690px;
  padding-top: 1%;
  overflow: scroll;
  padding-bottom: 50px;
}

.classify .body-right .sub {
  font-size: 12px;
  color: #999999;
  margin-left: 10px;
}
</style>
